<template>
    <h3>用户投资赎回页面</h3>
    <table class="table table-bordered">
        <tr>
            <td>项目名称:</td>
            <td>{{ data.I_Name }}</td>
        </tr>
        <tr>
            <td>项目投资总金额:</td>
            <td>{{ data.I_Budget }}</td>
        </tr>
        <tr>
            <td>用户已投金额:</td>
            <td>{{ data.UI_Money }}</td>
        </tr>
        <tr>
            <td>赎回金额</td>
            <td>
                <input type="text" v-model="data.Rmoney">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;"><button @click="RedeemInvestInfo">确认赎回</button></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { onMounted, ref } from 'vue'

//路由实例
const route = useRoute();
const router = useRouter();

//从地址栏中获取用户投资编号
const UIid = route.params.UIid;

const data = ref({
    I_Name: '',
    I_Budget: '',
    UI_Money: 0,
    Rmoney: 0
});

//生命周期钩子
onMounted(() => {
    axios({
        method: "get",
        url: "https://localhost:44305/api/Invests/GetUserInvestInfo",
        params: {
            UIid: UIid
        }
    })
        .then(function (res) {
            data.value = res.data[0];
        })

})

//确认赎回操作
const RedeemInvestInfo = () => {
    //判断赎回金额需大于0
    if (data.value.Rmoney <= 0) {
        alert('赎回金额需大于0元');
        return;
    }

    //判断赎回金额需小于用户投资金额
    if (data.value.Rmoney > data.value.UI_Money) {
        alert('赎回金额不得大于投资金额');
        return;
    }

    axios({
        method: "post",
        url: "https://localhost:44305/api/Invests/AddUserInvestRedeemInfo",
        data: {
            UIR_Money: data.value.Rmoney,
            UI_Id: UIid
        }
    })
        .then(function (res) {
            if (res.data > 0) {
                alert('赎回成功！');
                //跳转到列表页面
                router.push('/ShowInvestManage');
            }
            else {
                alert('赎回失败！');
            }

        })
        .catch(function (error) {
            console.log(error);
        })

}
</script>